<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Demo Memory Paging</title>
  <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css" />
	<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/xtheme-gray.css" />
	<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all.js"></script>
	<script type="text/javascript" src="PagingStore.js"></script>
	<script type="text/javascript" src="states.js"></script>
	<script type="text/javascript">
  Ext.onReady(function(){
    var cm = new Ext.grid.ColumnModel([{
       header: "Short Name",
       dataIndex: 'abbr',
			 sortable: true,
       width: 100
    }, {
       header: "Long Name",
       dataIndex: 'state',
       width: 200
    }]);
    
    cm.defaultSortable = true;
  
    var pageSize = 10;
    
    var ds = new Ext.ux.data.PagingArrayStore({
        fields: [
            {name: 'abbr'}
          ,	{name: 'state'}
        ]
      ,	lastOptions: {params: {start: 0, limit: pageSize}}
    });
  
    var grid = new Ext.grid.GridPanel({
        store: ds
			,	title: 'Demo Memory Paging'
      ,	cm: cm
      ,	width: 400
      ,	height: 300
      ,	selModel: new Ext.grid.RowSelectionModel()
      ,	renderTo: document.body
      ,	bbar: {
            xtype: 'paging'
          ,	store: ds
          ,	pageSize: pageSize
          ,	displayInfo: false
        }
    });
  
    ds.loadData( Ext.exampledata.states );
  
  });
  </script>    
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">
<!--
body {
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 0px;
}
-->
</style></head>
<body>  
</body>
</html>